<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Yager HomePage</title>
<!--    <link rel="stylesheet" href="/css/background.css">-->
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
    <style>
        .logo3{
            background-image: url("/img/default.jpg");
            background-position: center left;
            background-size: cover;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin: 0px 20px;
            box-shadow:
                /*logo*/ 0px 0px 2px #5f5f5f,
                /*effset*/ 0px 0px 0px 5px #ecf0f3,
                /*bottom right*/ 8px 8px 15px #a7aaaf,
                /*top left*/ -8px -8px 15px #ffffff;
        }
        .top-buffer{
            margin-top: 20px;
        }
    </style>
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg navbar-light" style="background-color: #e3f2fd; border-radius: 20px">
    <div class="container-fluid">
        <form class="d-flex" id="house_text">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" id="housetext" name="housetext">
            <button class="btn btn-outline-success" id="findhousesbytext" type="button" onclick="loadPageByText('/house/to_findHousesByText')">Search</button>
            <!--<div class="btn btn-group">
                <button class="btn btn-outline-dark">按照价格排序</button>
            </div>-->
        </form>
     <!--   <ul class="nav nav-pills mb-3 top-buffer" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-selected="true">主页</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="findhouses" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab"  aria-selected="false">找房子</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab"  aria-selected="false">找合租</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab"  aria-selected="false">我的房子</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab"  aria-selected="false">我的合租</button>
            </li>
            <li class="nav-item" role="presentation">
                <a style="position: absolute;width: 100px;text-decoration: none;color: transparent" href="/user/toUserInfo">aaaaaaaaa</a>
                <a class="nav-link" id="userinfo" data-bs-toggle="pill" data-bs-target="#pills-contact" role="tab"  href="/user/toUserInfo" aria-selected="false">个人中心</a>
            </li>
        </ul>-->
        <ul class="nav justify-content-center">
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#" onclick="loadPage('/house/to_home')">主页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="findhouses" href="#" onclick="loadPage('/house/to_findHouses')">找房子</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" onclick="loadPage('/house/to_addHouse')">发布</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#" onclick="loadPage('/house/to_myHouses')">我的房子</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#" onclick="loadPage('/order/getUserOrders')">我的合租</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" onclick="loadPage('/collection/toShowCollection')">我的收藏</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " onclick="loadPage('/user/toUserInfo')" href="#">个人中心</a> <!--href="/user/toUserInfo"-->
            </li>

        </ul>
        <a href="/user/logout" style="text-decoration: none">登出</a>
        <img class="logo3" th:src="${session.user.userimage}">
<!--        <div class="logo"></div>-->
    </div>
</nav>
    <div id="allItems">
    </div>
</body>
<script>
  document.onreadystatechange = function () {
      loadPage('/house/to_home');
  }
    function loadPage(url) {
        $.ajax({
            type:"GET",
            url: url,
            async: true,
            dataType: "html",
            contentType:'application/json; charset=utf-8',
            success: function (html) {
                $("#allItems").html(html);
            },
            error: function (xhr,data) {
                var judge=xhr.getResponseHeader('RED');
                if(judge=='RED') {
                    alert("请先登录！！")
                    var w=window;
                    w.location.href='/user/loginPage.html';
                }
                else{
                    alert("请求错误！！");
                }
            }
        })
    }
    function loadPageByText() {
        var housetext = document.getElementById("housetext").value;
        $.ajax({
            type:"GET",
            url: '/house/to_findHousesByText',
            async: true,
            data: {"housetext":housetext},
            dataType: "html",
            contentType: 'application/json; charset=utf-8',
            success:function (html){
                $('#allItems').html(html);
            },
            error: function () {
                alert("请求错误！！");
            }
        })
    }
  function loadComments() {
      $.ajax({
          url:'/comment/getHouseComments',
          type:'GET',
          async:true,
          dataType: "html",
          contentType: 'application/json; charset=utf-8',
          success:function (html) {
              $('#houseCommentInfo').html(html);
          },
          error: function () {
              alert("请求错误！！");
          }
      })
  }
</script>
</html>